<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="water"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById("water");
  var myChart = echarts.init(chartDom);

  let option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: "4%",
      left: "2%",
      right: "4%",
      // bottom: '2%',
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      axisLabel: {
        color: "#CFCFCF",
        interval: 0,
        fontSize: 14,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: true,
        color: "#CFCFCF",
        fontSize: 14,
        formatter: "{value}吨",
      },

      splitLine: {
        show: true,
        lineStyle: {
          width: 0.8,
          color: "rgba(127, 214, 255, .4)",
          type: "dashed",
        },
      },
    },
    series: [
      {
        type: "line",
        showSymbol: false,
        smooth: true,
        // symbolSize: 8,
        lineStyle: {
          color: "#00FFF6",
        },
        itemStyle: {
          color: "#00FFF6",
          borderColor: "#00FFF6",
          borderWidth: 2,
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0.25,
                color: "#00FFF686",
              },
              {
                offset: 1,
                color: "#00FFF600",
              },
            ],
          },
        },
        data: [0, 2000, 8000, 5000, 3000, 1000, 4000, 6000],
      },
    ],
  };
  option && myChart.setOption(option);
  //监听窗口变化
  window.addEventListener("resize", function () {
    console.log("监听窗口变化");
    myChart.resize();
  });
});
</script>

<style scoped>
#water {
  width: 100%;
  height: 100%;
}
</style>